<template>
	<div class="sql-page" style="width: 1000px;text-align: center">
		<el-form ref="form" label-width="82px" :model="form" :rules="rules">
			<el-form-item label="SQL语句:" prop="sqlText" style="text-align: left">
				<el-row class="align-center" >
					<CommonEditor ref="editor"  :value="form" v-model="form.sqlText" :initValue="sqlText" language="sql" style="margin-right: 10px">
					</CommonEditor>
				</el-row>
			</el-form-item>
			<el-form-item label="参数列表:" prop="inParams">
         <div>租户ID:#tenantId;账号:#loginName;手机号:#phone;姓名:#name;
           机构ID:#orgId;机构编码:#orgCode; 角色ID:#roleId;角色编码:#roleCode;
         </div>
				<queryList ref="queryList"  v-model="form.inParams" :value="form.inParams" @change="$refs.form.validateField('inParams')" :showRelation="false" />
			</el-form-item>
			<el-form-item label="输出参数:" prop="outParame" v-show="form.outParame && form.outParame.length">
				<paramsList v-model="form.outParame" :consts="consts" />
			</el-form-item>
			<el-row>
				<el-col :span="4">
          <el-form-item label="标签" prop="tag">

            <avue-select v-model="form.tag"
                         placeholder="请选择内容"
                         type="tree"
                         :dic="dicTag"></avue-select>

					</el-form-item></el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import queryList from './queryList.vue';
	import paramsList from './paramsList.vue';
	import CommonEditor from './editor.vue';
	// import { execute } from '@/api/apis/apiConfig/index.js';
	import { validateQuery } from './queryList';
	import { encode } from 'js-base64';
	export default {
		components: { queryList, CommonEditor, paramsList },
		props: {
			datasourceId: String,
			value: Object,
			consts: Array
		},
		data () {
			const defaultForm={
        inParams: [],
        outParame: [],
        sqlText:'',
				tag: null
			};
			return {
        dicTag:[
          {
            label: '分页',
            disabled: false,
            value: "page"
          }
        ],
        inParams: [],
				outParame: [],
				defaultForm,
				form: {
					...defaultForm
				},
				rules: {
          parame: [
						{
							validator: validateQuery,
							message: '请填写参数列表',
							trigger: 'blur'
						}
					],
					tag: [
						{
							required: true,
							message: '请选择是否分页',
							trigger: 'change'
						}
					]
				},
				sqlText: ''
			};
		},
		//生命周期 - 创建完成（访问当前this实例）
		created () { },
		//生命周期 - 挂载完成（访问DOM元素）
		mounted () { },
		methods: {
      initialize(val){
        this.form.inParams= val.inParams!=''? eval('('+val.inParams+')'):[];
        this.form.outParame=val.outParame;
        this.outParame=val.outParame;
        this.form.tag=val.tag;
        this.form.sqlText=val.sqlText;
        this.sqlText=this.form.sqlText;
        setTimeout(() => {
          this.$refs.editor.initialize(this.form);
        }, 200)
      },
			isVali () {
				this.sqlText= this.$refs.editor.sqlText;
        this.form.inParams= this.$refs.queryList.queryList;
        this.form.sqlText = this.sqlText;
        console.log("sqlText1:"+this.form.sqlText)
				return !!this.sqlText;
			},
			validate (callback) {
				if (this.isVali()) {

					this.$refs.form.validate((valid) => {

            console.log("valid:"+valid+";inParams:"+this.form.inParams)
						if (!valid) return false;
            if(! this.form.inParams){
              this.form.inParams = []
            }
            if(! this.form.outParame){
              this.form.outParame = []
            }
						let form={
              sqlText: this.form.sqlText,
              inParams: this.form.inParams.length ? JSON.stringify(this.form.inParams) :'',
              outParame: this.form.outParame.length ? JSON.stringify(this.form.outParame) :'',
							tag: this.form.tag
						};
						callback(form);
					});
				} else {
					this.$message.error('请填写SQL');
				}
			},
			clearValidate () {
				this.$nextTick(() => {
					this.$refs.form.clearValidate();
				});
				this.form={ ...this.defaultForm };
				this.form.inParams=[];
        this.form.sqlText='';
				this.sqlText='';
				//this.$refs.editor.clearValidate();
			},
		},
		// watch: {
    //   'value'(val) {
    //       console.log("val1")
    //       console.log(val)
		// 			if (val) {
    //
		// 				this.form.params= val.params!=''? eval('('+val.params+')'):[];
		// 				this.form.outParame=val.outParame;
		// 				this.outParame=val.outParame;
		// 				this.form.tag=val.tag;
    //         this.form.sqlText=val.sqlText;
    //         this.sqlText=this.form.sqlText;
		// 			}
		// 		}
		// }
	};
</script>
<style scoped lang="scss">
	/* @import url(); 引入css类 */
	.el-form-item__content {
		.el-select {
			width: 100%;
		}
	}

	.align-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.foot-btn {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
</style>
